body{
    .top-bar-header{
        width: 100%;//宽度
        height: 40px;
        line-height: 30px ;//行高文字所占的高度
        text-align:right ;//文字的对齐方式
        padding-right:60px ;//盒子右边留白
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;  /* 靠右对齐 */
        align-items: center;
        height: 40px;
        background-color: #f5f5f5;
        padding: 0 50px;
        font-size: 14px;
        border-bottom: 1px solid #e8e8e8;
        .top-bar-header-a{
            display:inline-block;//元素在一行内显示
            margin-left: 20px;
            color: #666;
            cursor: pointer;
            display: flex;
            align-items: center;
            .login{
                color:red;
                margin-left: 10px;
                margin-right: 10px;
                cursor: pointer;//鼠标样式，可以跳转
                margin: 0 5px;
            }
        }
        .car{
            margin-left: 30px;//外边距，其他元素的边距
            margin-right: 30px;
        }
    }
    
    .swiper{
        height: 435px;

    }
    .layui-col-xs3 img{
        width: 80px;
        height: 80px;

    }
    
    .logo{
        width: 9vw;
    }
    .search-input-wrapper{
        display: flex;
        align-items: center;
        height: 48px;
        border: 2px solid gainsboro;  /* 主题蓝色边框 */
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
        transition: all 0.3s ease;
    }
    .search-input-wrapper input {
        padding: 0 15px;
        font-size: 20px;
        outline: none;
        text-align: left;
        line-height: 60px;
        width: 42vw;
        margin-top: 25px;
        margin-bottom: 25px;
        border: none;
        border:1px solid #ccc;
    }
    .search-btn {
        height: 100%;
        padding: 0 25px;
        border: none;
        background: #1890ff;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: background-color 0.3s ease;
    }


  /* 购物车按钮 */
    .cart-btn {
        background-color: #f70303;
        font-size: 16px;
        line-height: 47px;
        margin-top: 25px;
        margin-bottom: 25px;
        margin-right:20px;
        width: 100px;
        border-radius: 5px;
    }
    .order-btn {
        color:white;
        font-size: 16px;
        line-height: 48px;
        margin-top: 25px;
        margin-bottom: 25px;
        width: 100px;
        background: #1E9FFF;
        border: 1px solid #d9d9d9;
        border-radius: 5px;
    }
    .order-btn:hover {
        background: #e8e8e8;
    }

    .layui-menu-body-title{
        height: 45px;
        line-height: 45px;
        position: relative;
        padding: 0px 15px;
        font-size: 14px;
        color: #333;
        cursor: pointer;
    }

    .layui-menu-body-title:hover {
        background-color: #f5f5f5;
        color: #ff5000;
    }
    .layui-icon-right {
        position: absolute;
        right: 15px;
        font-size: 12px;
        color: #999;
        transition: transform 0.3s;
    }
    /* 轮播图片 */
    .layui-carousel [carousel-item] img {
        width: 100%;
        height: 100%;
        object-fit: cover;  /* 保持图片比例并填充容器 */
    }

    .container{
        width: 80vw;
        //background-color: #4a90e2;
        height: 1000px;
        margin:0 auto ;
        .containerHeader{
            width: 80vw;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: space-between;

        }
    }
    .title{
        font-size: 30px;
        border-bottom: 2px solid #333;
        line-height: 80px;
        font-weight: 700;
    }
    .booksItem{
        width: 16vw;
        height: 48vh;
        //background-color: rgb(163, 65, 190);
        border-left: 1px solid rgb(180, 169, 169);
        border-bottom: 1px solid gray;
        box-sizing: border-box;
        padding: 2vh 1.5vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        img{
            width: 13vw;
        }
        .booksInfo{
            color:#999;
            font-size: 11px;
        }
    }
    .booksItem:nth-child(5n){
        border-right:1px solid green;
    }
    .booksPrice{
        color:#ff2832;
        font-weight: 700;
    }
    .booksList{
        display:flex;
        flex-wrap: wrap;
        
    }
    .footer{
        width: 100vw;
        border-top:2px solid red;
        margin-top: 8vh;
        text-align: center;
        .footerBG{
            width: 100vw;
            height: 10vh;
            background-color: #fafafa;
            img{
                height: 10vh;
            }
        }
        .footerList{
            width: 100vw;
            border-top:1px solid#ccc;
            //background-color: #4a90e2;
            border-bottom: 1px solid #ccc;
            box-sizing: border-box;
            padding: 3vh 10vw;
            display: flex;
            justify-content: space-around;
            li{
                color:#7d7d7d
            }
            li:first-child{
                font-weight: 700;
                font-size: 16px;
                line-height: 30px;
                color:#000;
            }
        }
        .footerInfo{
            display: flex;
            padding: 3vh 18vw;
            justify-content: center;
            color: #8c8c8c;
            .InfoItem{
                border-right: 1px solid grey;
                padding: 0 1vw;
               
            }
            .InfoItem:last-child{
                border: none;
            }
            
        }
        .footerCopyright{
            color:#8c8c8c;
            margin-bottom: 10px;
        }
        .DesItem{
            display: flex;
            justify-content: center;
            padding: 0vh 10vw;
            color:#ccc;}
        .Des{
            padding: 0 1vw;
            border-right: 1px solid#ccc;
            color:#8c8c8c;
            }
        .Des:last-child{
                border:none;
            }
        }
        .footerDes{
            color:#8c8c8c;
        }
    .cart-btn{
        color: white;
    }
    .mulu{
        font-size: 20px;
        color: #fff;
        font-weight: 700;
        padding: 0 15px;
        background-color: red;
        line-height: 60px;
        box-sizing: border-box;
    }
  .SalePrice{
    color: #666;
    margin-left: 10px;
    font-size: 12px;
    
  }
    .sale{
        display: flex;
        align-items: center;
    }
    .progress{
        height: 10px;
        width: 13vw;
        background-color: #ffb7b7;
    }
    .empty5{
        height: 15px;
    }
    .font14{
        font-size: 14px!important;
    }
    .colorRed{
        color: red!important;
    }
    .time{
        color:red;
    }
    #mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(8px); /* 模糊背景 */
        z-index: 1000;
        display: none; /* 默认隐藏 */
        align-items: center;
        justify-content: center;
    }
    
    /* 显示遮罩层和登录框 */
    #mask.show {
        display: flex;
    }
    
    /* 登录弹窗容器 */
    .maskContent.loginBox {
        background: #fff;
        width: 100%;
        max-width: 400px;
        padding: 30px 40px;
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        animation: fadeIn 0.3s ease-out;
    }
    
    /* 标题和关闭按钮 */
    .loginTitleBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }
    
    .loginTitle {
        font-size: 24px;
        font-weight: bold;
        color: #333;
    }
    
    .loginClose {
        cursor: pointer;
        font-size: 20px;
        color: #888;
        transition: color 0.3s ease;
    }
    
    .loginClose:hover {
        color: #ff4d4f;
    }
    
    /* 登录内容 */
    .loginContent {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    /* 输入框样式 */
    .loginInput input {
        width: 92%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 16px;
        transition: border-color 0.3s ease;
    }
    
    .loginInput input:focus {
        outline: none;
        border-color: #1E9FFF;
        box-shadow: 0 0 5px rgba(30, 159, 255, 0.5);
    }
    
    /* 按钮样式 */
    .loginBtn button {
        width: 100%;
        padding: 12px 0;
        background-color: #1E9FFF;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }
    
    .loginBtn button:hover {
        background-color: #0d8ae6;
        transform: translateY(-2px);
    }
    
    /* 注册链接和按钮组合 */
    .loginBtn .register-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .loginBtn #loginBtn {
        color: #888;
        font-size: 14px;
        cursor: pointer;
        transition: color 0.3s ease;
    }
    
    .loginBtn #loginBtn:hover {
        color: #1E9FFF;
    }
    
    .loginBtn button.register-btn {
        background-color: #fff;
        color: #1E9FFF;
        border: 1px solid #1E9FFF;
        padding: 12px 0;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    
    .loginBtn button.register-btn:hover {
        background-color: #1E9FFF;
        color: #fff;
        border-color: #1E9FFF;
    }
    
}